<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>我的相册</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css">
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/reg_style.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/ljq.css" />
		<link rel="stylesheet" type="text/css" href="css/hgs-date.css" />
		<style type="text/css">
			  .mui-preview-image.mui-fullscreen {
                position: fixed;
                z-index: 999;
                background-color: #000;
            }
            .mui-preview-header,
            .mui-preview-footer {
                position: absolute;
                width: 100%;
                left: 0;
                z-index: 10;
            }
            .mui-preview-header {
                height: 44px;
                top: 0;
            }
            .mui-preview-footer {
                height: 50px;
                bottom: 0px;
            }
            .mui-preview-header .mui-preview-indicator {
                display: block;
                line-height: 25px;
                color: #fff;
                text-align: center;
                margin: 15px auto 4;
                width: 70px;
                background-color: rgba(0, 0, 0, 0.4);
                border-radius: 12px;
                font-size: 16px;
            }
            .mui-preview-image {
                display: none;
                -webkit-animation-duration: 0.5s;
                animation-duration: 0.5s;
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
            }
            .mui-preview-image.mui-preview-in {
                -webkit-animation-name: fadeIn;
                animation-name: fadeIn;
            }
            .mui-preview-image.mui-preview-out {
                background: none;
                -webkit-animation-name: fadeOut;
                animation-name: fadeOut;
            }
            .mui-preview-image.mui-preview-out .mui-preview-header,
            .mui-preview-image.mui-preview-out .mui-preview-footer {
                display: none;
            }
            .mui-zoom-scroller {
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                align-items: center;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                width: 100%;
                height: 100%;
                margin: 0;
                -webkit-backface-visibility: hidden;
            }
            .mui-zoom {
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
            }
            .mui-slider .mui-slider-group .mui-slider-item img {
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 100%;
            }
            .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
                width: 100%;
            }
            .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
                display: inline-table;
            }
            .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
                display: table-cell;
                vertical-align: middle;
            }
            .mui-preview-loading {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                display: none;
            }
            .mui-preview-loading.mui-active {
                display: block;
            }
            .mui-preview-loading .mui-spinner-white {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -25px;
                margin-top: -25px;
                height: 50px;
                width: 50px;
            }
            .mui-preview-image img.mui-transitioning {
                -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
                transition: transform 0.5s ease, opacity 0.5s ease;
            }
            @-webkit-keyframes fadeIn {
                0% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
            @keyframes fadeIn {
                0% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
            @-webkit-keyframes fadeOut {
                0% {
                    opacity: 1;
                }
                100% {
                    opacity: 0;
                }
            }
            @keyframes fadeOut {
                0% {
                    opacity: 1;
                }
                100% {
                    opacity: 0;
                }
            }
		</style>
		
		
        <!--App自定义的css-->
        <style type="text/css">
            .leftImage {
                margin-top: 10px;
                width: 45%;
                height: 200px;
                margin-left: 10px;
                float: left;
            }
            .rightImage {
                margin-top: 10px;
                width: 45%;
                height: 200px;
                margin-right: 10px;
                float: right;
            }
            
            
            
        </style>
        
        
		<style>
			.head1 .div1 {
				width: 90%;
			}
			
			.head1 .bianji {
				float: right;
				font-size: 0.16rem;
				margin-right: 0.12rem;
				/*margin-top: 0.1rem;*/
				color: #48a8ff;
			}
			
			.day_div {
				height: 0.4rem;
				line-height: 0.4rem;
				font-size: 0.12rem;
			}
			
			.day_div span {
				float: left;
				margin-left: 0.12rem;
				color: #4D4D4D;
			}
			
			.day_div em {
				float: right;
				margin-right: 0.12rem;
				color: #48a8ff;
			}
			
			ul {
				padding: 0!important;
				margin: 0!important;
			}
			
			ul li {
				display: block;
				padding: 0 0.01rem!important;
				margin: 0!important;
				position: relative;
				margin-top: 0.1rem!important;
			}
			
			ul img {
				display: block;
				width: 0.92rem!important;
				height: 0.92rem!important;
			}
			
			.xuanzhong {
				display: none;
				position: absolute;
				top: 0.05rem;
				right: 0.05rem;
				width: 0.15rem!important;
				height: 0.15rem!important;
			}
			
			.bot {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 0.4rem;
				line-height: 0.4rem;
				border-top: 1px solid #ccc;
				background: #fff;
				z-index:999;
			}
			
			.bot span {
				float: left;
				font-size: 0.12rem;
				color: #ccc;
				width: 77%;
				text-align: center;
			}
			
			.bot img {
				width: 0.24rem;
				height: 0.24rem;
				margin-top: 0.08rem;
			}
			
			.bot .img1 {
				float: left;
				margin-left: 0.12rem;
			}
			
			.bot .img2 {
				float: right;
				margin-right: 0.12rem;
			}
			
			.zitiyanse {
				color: #4D4D4D!important;
			}
		</style>
	</head>
	<!--注意：选中前，图片没有“选中图片（隐藏）”，底部字体颜色是#ccc，图片是未点亮-->
	<!--注意：选中后，图片有“选中图片（显示）”，底部字体颜色是#4d4d4d，
	图片是点亮"选择"变成"取消选择"，头部"选择"变成"完成"-->

	<body>
		<header class="mui-bar mui-bar-nav head1">
			<em class="mui-action-back"><img class="img1" src="img/fanhui.png" alt="" /></em>
			<div class="div1"><span class="span0" id="list-shop-lists">我的相册</span><span id="photo_bianji" class="bianji">选择</span></div>
		</header>
		<div class="mui-content">
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="border:0px solid palevioletred;">
				<div class="mui-scroll" style="border:0px solid #0000CC;">
					<ul class="shuju2" id="photo_tupian" style="padding-top: 44px !important;">

					</ul>
				</div>
			</div>
			<!--<div id="photo_tupian">

			</div>-->
			<div class="bot">
				<img src="img/fenxiang1.png" alt="" class="img1" />
				<span>已选到<em class="em1" id="select_photo_num">0</em>张图片<!--，<em class="em2">2</em>个视频--></span>
				<img onclick="mine_storage_delete();" src="img/shanchu1.png" alt="" class="img2" />
			</div>
		</div>

		<!--/********************日期控件**************************/-->
		<!--<link rel="stylesheet" type="text/css" href="css/hgs-date.css" />
		<script src="js/hgs-date.js"></script>-->
		<!--/********************日期控件**************************/-->
		<input id="index-shop-lists-id" type="hidden">
		<input id="index-shop-lists" type="hidden">
		<input id='index-end-date' type="hidden" />
		<input id='index-start-date' type="hidden" />

		<!--/***************************************************/-->

		<script src="js/mui.min.js"></script>
		<script src="js/mui.enterfocus.js"></script>
		<script src="js/app.js"></script>
		<script src="js/mui.picker.min.js"></script>

		<script src="js/crypto-js.js"></script>
		<script src="js/jquery.js"></script>
		<script type="text/javascript" src="js/common.js?ver=20180125"></script>
		<script type="text/javascript" src="js/fuction.js?ver=20180125"></script>
    <script src="js/mui.zoom.js">    </script>
    <script src="js/mui.previewimage.js"></script>		
		<script type="text/javascript">
			mui.init();
		</script>
		<script type="text/javascript">
			var xout = 0;
			var count = 0;
			var pagenum = 10;
			var totalnum = 20;
			var pagesize = Math.floor(totalnum / pagenum);

			//被选择的相片
			var select_photo = [];

			$(document).ready(function() {

				$(".bianji").click(function() { //点击编辑按钮
					select_photo = [];
					if($(this).html().indexOf("选择") != -1) {
						$(".mui-media-object").removeAttr("data-preview-src");//减预览功能
						$(this).html("完成");
						$(".bot span").addClass("zitiyanse");
						$(".bot .img1").attr("src", "img/fenxiang2.png");
						$(".bot .img2").attr("src", "img/shanchu2.png");
						$(".today_xuanze").css('display', 'block');

					} else {
						
						$(".mui-media-object").attr("data-preview-src","");//加预览功能
						$(this).html("选择");
						$(".bot span").removeClass("zitiyanse");
						$(".bot .img1").attr("src", "img/fenxiang1.png");
						$(".bot .img2").attr("src", "img/shanchu1.png");
						$(".today_xuanze").html("选择");
						$(".today_xuanze").css('display', 'none');
						$(".xuanzhong").css('display', 'none');

						//对选择好的相片进行 组合
						var x = $(".xuanzhong");
						$.each(x, function(index, item) {
							var y = x.eq(index).attr("id");
							var z = x.eq(index).data("valid", "0");
						});

					};
					//重新计算
					btn_xuanzhong();

				});

			});

			mui.ready(function() {
				//获取当前的客户数据
				xminereadyload();

			});

			//3.39 我的相册----查询我的相册列表
			function mine_storage_lists(count, pagenum) {
				var xbx = {};

				xbx.page = count;
				xbx.limit = pagenum; //分组limit

				//登录后的参数对象AES加密
				official_login_after(url_host + 'mine/storage/lists', xbx, 'mine_storage_lists');

			}

			//3.40 删除相册信息 
			function mine_storage_delete() {
				var xbx = {};
				xbx.id = select_photo; //id	Int|array	是	相册ID

				//登录后的参数对象AES加密
				official_login_after(url_host + 'mine/storage/delete', xbx, 'mine_storage_delete');

			}

			//统计所有被选择的东西
			function btn_xuanzhong() {
				//对选择好的相片进行 组合
				var x = $(".xuanzhong");
				select_photo = [];

				$.each(x, function(index, item) {
					var y = x.eq(index).attr("id");
					var z = x.eq(index).data("valid");
					if(z == "1") {
						select_photo.push(y);
					}
				});

				$("#select_photo_num").html(select_photo.length);
				//console.log(select_photo);

			}
		</script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});

			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > pagesize)); //参数为true代表没有更多数据了。

					//3.39 我的相册----查询我的相册列表				
					mine_storage_lists(count, pagenum);

				}, 800);
			}
			if(mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 1000);

				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}
			$(function() {
				//mui触屏点击
				//				$("#pullrefresh").on('tap', 'li', function(event) {
				//					var url = $(this).attr("data-url");
				//					location.href = url;
				//				});

				//mui触屏点击
				$("#pullrefresh").on('tap', '.mui-media-object', function(event) {
					//$(".mui-media-object").click(function() { //点击单张图片按钮
					var tmpimgcl = $(this).data("imgid");
					var tdisplay = $(tmpimgcl).css('display');
					if($("#photo_bianji").html().indexOf("完成") != -1) {
						if(tdisplay == 'none') {
							$(tmpimgcl).show();
							$(tmpimgcl).data("valid", "1");
						} else {
							$(tmpimgcl).hide();
							$(tmpimgcl).data("valid", "0");
						}
					}
					//统计被选择的图片
					btn_xuanzhong();
				});

				//mui触屏点击
				$("#pullrefresh").on('tap', '.today_xuanze', function(event) {
					//$(".today_xuanze").click(function() { //点击选择按钮
					var tmpbtncl = $(this).data("id");
					if($(this).html().indexOf("选择") != -1) {
						//显示全部选中
						$(tmpbtncl).css('display', 'block');
						$(tmpbtncl).data("valid", "1");
						$(this).html("取消");
					} else {
						//取消全部选中
						$(tmpbtncl).css('display', 'none');
						$(tmpbtncl).data("valid", "0");
						$(this).html("选择");
					}
					//统计被选择的图片
					btn_xuanzhong();
				});

			});
		</script>
		
    <script>

        mui.previewImage();

        mui.plusReady(function() {
            getaData();
        })
        // 获取数据
        function getaData() {
            var table = document.body.querySelector('.mui-table-view');
            var timestamp = getDataStr();
            mui.ajax(baseUrl, {
                data: {
                    key: '',
                    typeId: '',
                    showapi_appid: appid,
                    showapi_sign: sign,
                    showapi_timestamp: timestamp,
                    page:1
                },
                dataType: 'json',
                type: 'post',  
                timeout: 10000,
                beforeSend: function(data) {
                    plus.nativeUI.showWaiting(); 
                },
                success: function(data) {
                    plus.nativeUI.closeWaiting();  
                    if (data.showapi_res_code == 0) {
                        console.log("imageView成功");
                        var dice1 = data.showapi_res_body;
                        var dice2 = dice1.pagebean;
                        table.innerHTML = '';
                        for (var i = 0; i < dice2.contentlist.length - 1; i = i + 2) {
                            var item1 = dice2.contentlist[i];
                            var item2 = dice2.contentlist[i + 1];
//                          console.log(item1.contentImg);
                            var li = document.createElement('li');
                            li.className = 'image-li'; 
                            li.innerHTML = '<img class="leftImage" src="'+ item1.contentImg + '" data-preview-src="" data-preview-group="1" />'
                                        + '<img class="rightImage" src="'+ item2.contentImg + '" data-preview-src="" data-preview-group="1" />';
                            table.appendChild(li, table.firstChild);
                        }
                    }
                },
                error: function(xhr, type, errerThrown) {
                    mui.toast('网络异常,请稍候再试');
                    plus.nativeUI.closeWaiting();  
                }
            });
        }   


    </script>			
	</body>

</html>